<template>
  <div class="app">
    <el-card style="margin-bottom: 20px">
      <el-row :gutter="20">
        <div class="login-title">登录用户：</div>
        <el-col :span="5">
          <el-input placeholder="请输入登录用户名"></el-input>
        </el-col>
        <el-button type="primary" color="#009688" :icon="Search"
          >搜索</el-button
        >
      </el-row>
    </el-card>
    <el-card>
      <TableBorder :list="logList"></TableBorder>
      <!-- 分页 -->
      <div class="paginate-div">
        <el-pagination
          v-model:current-page="pages.page"
          v-model:page-size="pages.pageSize"
          :page-sizes="[1, 2, 5, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import logApi from "@/request/apis/log.js";
import { onMounted, ref } from "vue";
import TableBorder from "@/components/tables/table_border.vue";

const logList = ref([]);

const pages = ref({
  page: 1,
  pageSize: 10,
});

const total = ref("");

const handleSizeChange = (pageSize) => {
  pages.value.pageSize = pageSize;
  log();
};

const handleCurrentChange = (pageNum) => {
  pages.value.page = pageNum;
  log();
};

const log = () => {
  logApi.login_log(pages.value.page, pages.value.pageSize).then((res) => {
    logList.value = res.result;
    total.value = res.result.total;
  });
};

onMounted(() => {
  log();
});
</script>

<style scoped>
.login-title {
  font-size: 14px;
  color: #606266;
  line-height: 32px;
  margin-left: 5px;
}
</style>